<template>
  <el-space alignment="flex-start" style="width: 100%;margin-bottom: 20px;">
    <el-date-picker
    :editable="false"
    :clearable="false"
    :disabled-date="disabledDate"
        v-model="dateRange"
        type="daterange"
        start-placeholder="Start Date"
        end-placeholder="End Date"
      />
      <el-input
        v-model="searchValue"
        placeholder="Please input"
        class="input-with-select"
        @keydown.enter="queryBefoe"
      >
        <template #prepend>
          <el-select v-model="searchType" placeholder="Select" style="width: 110px">
            <el-option label="店铺编号" value="orgcode" />
            <el-option label="店铺账号" value="account" />
          </el-select>
        </template>
        <template #append>
          <el-button :icon="Search" @click="queryBefoe" />
        </template>
      </el-input>
  </el-space>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date_format" label="时间" width="180" />
    <el-table-column prop="name" label="店铺" width="180" />
    <el-table-column prop="error_msg" label="错误信息" width="180" />
    <el-table-column prop="mod" label="报错模块" width="180" />
    <el-table-column prop="ua" label="浏览器版本" />
    <el-table-column prop="channel" label="来源" />
    <el-table-column prop="platform" label="登录设备" />
    <el-table-column prop="device_addres" label="打印地址" />
    <el-table-column prop="lodop_version" label="Lodop版本" />
    <!-- <el-table-column prop="ip" label="ip" /> -->
  </el-table>
  <el-pagination
    background
    v-model:currentPage="params.page"
    layout="prev, pager, next"
    :total="total"
    :page-size="params.limit"
  />
</template>
<script setup>
import { ref,reactive,watch,onMounted } from 'vue'
import {Search} from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import {getLogsError} from '@/api/logs'

const tableData = ref([])
const dateRange = ref([new Date(),new Date()])
const searchType = ref('orgcode')
const searchValue = ref('')
const params = reactive({
  page:1,
  limit:10
})
const total = ref(0)
const disabledDate = date => new Date(date).getTime() > Date.now()

const handlerQuery = async ()=>{
  const par = {
    ...params,
    startdate:dayjs(dayjs(dateRange.value[0]).format('YYYY-MM-DD')).valueOf(),
    enddate:dayjs(dayjs(dateRange.value[1]).format('YYYY-MM-DD')).add(1,'day').valueOf()
  }
  par[searchType.value] = searchValue.value
  const res = await getLogsError(par)
  res.results.forEach(i=>{
    i.date_format = dayjs(+i.create_date).format('YYYY-MM-DD HH:mm:ss')
  })
  tableData.value = res.results
  total.value = res.total
}

const queryBefoe = ()=>{
  if(params.page === 1) return handlerQuery()
  params.page = 1
}
watch(()=>params.page,handlerQuery)
onMounted(() => {
  handlerQuery()
})
</script>
<style lang="scss" scoped>
.el-pagination{
  display: flex;
  justify-content: center;
}
</style>
